<template>
	<view class="mine">
		<view class="header">
			<view class="" @click="goToHome">
				<uni-icons type="left" size="30"></uni-icons>
				
			</view>
			<view class="header-title">
				我的
			</view>
		</view>
		<view class="top-img">
			<image src="../../static/touxiang.jpg" class="touxiang" mode=""></image>
		</view>
		<view class="name">
			天目日报
		</view>

		<view class="active-list">
			<view class="list" v-for="(item,index) in cellListData" :key="index" @click="history(index)">
				<view class="list-left">
					{{item.title}}
				</view>
				<view class="list-right" v-if="index === 0">
					<uni-icons type="forward"></uni-icons>
				</view>
				<view class="list-right" v-if="index === 1">
					<uni-icons type="forward"></uni-icons>
				</view>
				<view v-if="index === 2">
					<switch checked @change="switch1Change" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cellListData: [{
						title: "历史浏览",
					},
					{
						title: "我的收藏",
						routerName: ''
					},
					{
						title: "夜间模式",
					},
					{
						title: "退出登录",
					},
				]
			}
		},
		
		methods: {
			goToHome() {
				// uni.redirectTo({
				// 	url: '../index/index'
				// });
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			switch1Change: function(e) {
				// console.log('switch1 发生 change 事件，携带值为', e.detail.value);
				localStorage.setItem('theme', e.detail.value);

			},
			history(index) {
				if (index === 0) {
					uni.navigateTo({
						url: `../history/histroy`
					})
				}
				if (index === 1) {
					uni.navigateTo({
						url: `../collection/collection`
					})
				}
				if (index === 3) {
					uni.removeStorage({
						key: 'codeyes',
						success: function(res) {
							uni.navigateTo({
								url: `../login/login`
							})
							// uni.setStorage({
							// 	key: 'codeyes',
							// 	data: 'hello',
							// 	success: function() {
							// 		console.log('success');
							// 	}
							// });
						}
					})

				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.mine {
		// padding-top: 88rpx;
	}

	.header {
		background-color: #F8F8F8;
		padding: 20rpx 10rpx;
		display: flex;
		align-items: center;

		.header-title {
			margin-left: 280rpx;
			font-size: 36rpx;
		}
	}

	.touxiang {
		width: 172rpx;
		height: 172rpx;
		border-radius: 50%;
		margin: 0 auto;
		display: block;
		margin-top: 100rpx;
	}

	.name {
		text-align: center;
		margin-top: 10rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.active-list {
		margin-top: 40rpx;
	}

	.list {
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		padding: 30rpx 20rpx;
		align-items: center;
		border-bottom: 2rpx solid #e8e8e8;

		.list-left {
			padding-left: 20rpx;
		}
	}

	.list:first-child {
		border-top: 1px solid #e8e8e8;
	}
</style>
